<template>
  <div>
    <component :is="currentTab.tabComp" :data="jump"></component>
</div>

</template>

<script lang="ts" setup>
import zhanghao from '@/views/settings/zhanghao.vue'
import shezhi from '@/views/settings/shezhi.vue'
import anquan from '@/views/settings/anquan.vue'
import xiaoxi from '@/views/settings/xiaoxi.vue'
import xiugai from '@/views/settings/xiugai.vue'
import geren from '@/views/settings/geren.vue'
import yanzheng from '@/views/settings/yanzheng.vue'
import genggai from '@/views/settings/genggai.vue'
import gaimi from '@/views/settings/gaimi.vue'
import { reactive, markRaw } from 'vue'
type tabType = {
  name: string,
  tabComp: any
}
type Comp = Pick<tabType, 'tabComp'>
const tabData = reactive<tabType[]>([
  {
    name: '设置',//0
    tabComp: markRaw(shezhi)
  },
  {
    name: '账号资料',//1
    tabComp: markRaw(zhanghao)
  },
  {
    name: '账号与安全',//2
    tabComp: markRaw(anquan)
  },
  {
    name: '消息通知',//3
    tabComp: markRaw(xiaoxi)
  },
  {
    name: '修改昵称',//4
    tabComp: markRaw(xiugai)
  },
  {
    name: '个人简介',//5
    tabComp: markRaw(geren)
  },
  {
    name: '验证手机',//6
    tabComp: markRaw(yanzheng)
  },
  {
    name: '更改手机号',//7
    tabComp: markRaw(genggai)
  }, 
  {
    name: '更改密码',//8
    tabComp: markRaw(gaimi)
  },
])
let currentTab = reactive<Comp>({
  tabComp: tabData[0].tabComp
})
function jump(val:any){
    currentTab.tabComp=tabData[val].tabComp
}
</script>

<style>
</style>